/*
 * Copyright © 2016 Cask Data, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not
 * use this file except in compliance with the License. You may obtain a copy of
 * the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations under
 * the License.
 */

@import "../../styles/variables.scss";

.app-detailed-view {
  height: calc(100vh - 104px);
  background: rgba(238, 238, 238, 1);
  color: rgba(51, 51, 51, 1);
  overflow-y: auto;
  position: relative;

  @media (min-width: 1701px) {
    .entity-cards {
      width: calc((100% - 20px - 10px - (6 * 10px)) / 7);
    }
  }

  @media (min-width: 1601px) and (max-width: 1700px) {
    .entity-cards {
      width: calc((100% - 20px - 10px - (5 * 10px)) / 6);
    }
  }

  @media (min-width: 1201px) and (max-width: 1600px) {
    .entity-cards {
      width: calc((100% - 20px - 10px - (4 * 10px)) / 5);
    }
  }

  @media (min-width: 993px) and (max-width: 1200px) {
    .entity-cards {
      width: calc((100% - 20px - 10px - (3 * 10px)) / 4);
    }
  }

  @media(min-width: 768px) and (max-width: 992px) {
    .entity-cards {
      width: calc((100% - 20px - 10px - (2 * 10px)) / 3);
    }
  }

  .cask-resourcecenter-button {
    top: 8px;
    position: absolute;
  }
  .overview-tab {
    > .nav-tabs {
      .nav-item {
        .nav-link {
          float: left;
          padding: 0;

          a {
            text-decoration: none;
            padding: 0.5em 1em;
            float: left;
            color: inherit;

            &.active {
              font-weight: bold;
              text-decoration: none;
              padding-bottom: 5px;
              border-bottom: 2px solid $cdap_orange;
            }
          }
        }
      }

    }
  }
  > .fa.fa-spinner.fa-spin {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: gray;
  }

  .properties-container {
    height: 100%;
    padding: 15px 10px;
    overflow: auto;

    .message-section {
      padding: 0 10px;
      margin-bottom: 15px;
    }
  }
}
